<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../../dist/css/list.min.css">
   <link rel="stylesheet" href="../lib/htmleaf-demo.css">
    <link rel="stylesheet" href="../lib/fenye.css">
    <script src="../lib/jquery-1.12.4.min.js"></script>
    <script src="../lib/jquery.cookie.js"></script>
    
</head>

<body>
    <header>
        
    </header>

    <main>
        <!-- 全部商品 -->
        <div class="quanbu">
            <div>
                <span>全部商品 > <span>中兴</span></span>
            </div>
        </div>

        <div class="center">
            <!-- 排序 -->
            <div class="nav">
                <!-- 左 -->
                <div class="left">
                    <div>排序:</div>
                    <ul>
                        <li><a href="" class="l-li1">综合</a></li>
                        <li><a href="">销量</a></li>
                        <li><a href="">价格</a></li>
                        <li><a class="white" href="" class="l-li4">上架时间</a></li>
                    </ul>
                </div>
                <!-- 右 -->
                <div class="right">
                    <span class="num">共 <em>65</em> 件商品</span>
                    <span>
                        <em>1</em>
                        /4
                    </span>
                    <span class="lt">&lt;</span>
                    <span class="gt">&gt;</span>

                </div>
            </div>
            <!-- 商品区 -->
               <ul class="item-list">
                   <li>
                       <div class="pic">
                           <a href="../html/details.html">
                               <img src="../img/1.jpg" alt="">
                           </a>
                          
                       </div>
                       <div class="inf">
                           <p class="name">
                               ZTE 中兴 Axon 40 Ultra 手机保护壳
                           </p>
                           <p class="price">￥ 99.99</p>
                           <p class="cart">加入购物车</p>
                       </div>
                   </li>
                   <li>
                    <div class="pic">
                        <a href="../html/details.html">
                            <img src="../img/2.jpg" alt="">
                        </a>
                       
                    </div>
                    <div class="inf">
                        <p class="name">
                            ZTE 中兴 Axon 40 Ultra 手机保护壳
                        </p>
                        <p class="price">￥ 99.99</p>
                        <p class="cart">加入购物车</p>
                    </div>
                </li>
                <li>
                    <div class="pic">
                        <a href="../html/details.html">
                            <img src="../img/3.jpg" alt="">
                        </a>
                       
                    </div>
                    <div class="inf">
                        <p class="name">
                            ZTE 中兴 Axon 40 Ultra 手机保护壳
                        </p>
                        <p class="price">￥ 99.99</p>
                        <p class="cart">加入购物车</p>
                    </div>
                </li>
                <li>
                    <div class="pic">
                        <a href="../html/details.html">
                            <img src="../img/4.jpg" alt="">
                        </a>
                       
                    </div>
                    <div class="inf">
                        <p class="name">
                            ZTE 中兴 Axon 40 Ultra 手机保护壳
                        </p>
                        <p class="price">￥ 99.99</p>
                        <p class="cart">加入购物车</p>
                    </div>
                </li>
                <li>
                    <div class="pic">
                        <a href="../html/details.html">
                            <img src="../img/5.jpg" alt="">
                        </a>
                       
                    </div>
                    <div class="inf">
                        <p class="name">
                            ZTE 中兴 Axon 40 Ultra 手机保护壳
                        </p>
                        <p class="price">￥ 99.99</p>
                        <p class="cart">加入购物车</p>
                    </div>
                </li>
                <li>
                    <div class="pic">
                        <a href="../html/details.html">
                            <img src="../img/5.png" alt="">
                        </a>
                       
                    </div>
                    <div class="inf">
                        <p class="name">
                            ZTE 中兴 Axon 40 Ultra 手机保护壳
                        </p>
                        <p class="price">￥ 99.99</p>
                        <p class="cart">加入购物车</p>
                    </div>
                </li>
                <li>
                    <div class="pic">
                        <a href="../html/details.html">
                            <img src="../img/6.jpg" alt="">
                        </a>
                       
                    </div>
                    <div class="inf">
                        <p class="name">
                            ZTE 中兴 Axon 40 Ultra 手机保护壳
                        </p>
                        <p class="price">￥ 99.99</p>
                        <p class="cart">加入购物车</p>
                    </div>
                </li>
                 <li>
                    <div class="pic">
                        <a href="../html/details.html">
                            <img src="../img/7.jpg" alt="">
                        </a>
                       
                    </div>
                    <div class="inf">
                        <p class="name">
                            ZTE 中兴 Axon 40 Ultra 手机保护壳
                        </p>
                        <p class="price">￥ 99.99</p>
                        <p class="cart">加入购物车</p>
                    </div>
                </li>
                <li>
                    <div class="pic">
                        <a href="../html/details.html">
                            <img src="../img/8.jpg" alt="">
                        </a>
                       
                    </div>
                    <div class="inf">
                        <p class="name">
                            ZTE 中兴 Axon 40 Ultra 手机保护壳
                        </p>
                        <p class="price">￥ 99.99</p>
                        <p class="cart">加入购物车</p>
                    </div>
                </li>
                <li>
                    <div class="pic">
                        <a href="../html/details.html">
                            <img src="../img/9.jpg" alt="">
                        </a>
                       
                    </div>
                    <div class="inf">
                        <p class="name">
                            ZTE 中兴 Axon 40 Ultra 手机保护壳
                        </p>
                        <p class="price">￥ 99.99</p>
                        <p class="cart">加入购物车</p>
                    </div>
                </li>
                <li>
                    <div class="pic">
                        <a href="../html/details.html">
                            <img src="../img/10.jpg" alt="">
                        </a>
                       
                    </div>
                    <div class="inf">
                        <p class="name">
                            ZTE 中兴 Axon 40 Ultra 手机保护壳
                        </p>
                        <p class="price">￥ 99.99</p>
                        <p class="cart">加入购物车</p>
                    </div>
                </li>
                <li>
                    <div class="pic">
                        <a href="../html/details.html">
                            <img src="../img/11.jpg" alt="">
                        </a>
                       
                    </div>
                    <div class="inf">
                        <p class="name">
                            ZTE 中兴 Axon 40 Ultra 手机保护壳
                        </p>
                        <p class="price">￥ 99.99</p>
                        <p class="cart">加入购物车</p>
                    </div>
                </li>
                <li>
                    <div class="pic">
                        <a href="../html/details.html">
                            <img src="../img/13.jpg" alt="">
                        </a>
                       
                    </div>
                    <div class="inf">
                        <p class="name">
                            ZTE 中兴 Axon 40 Ultra 手机保护壳
                        </p>
                        <p class="price">￥ 99.99</p>
                        <p class="cart">加入购物车</p>
                    </div>
                </li>
                <li>
                    <div class="pic">
                        <a href="../html/details.html">
                            <img src="../img/14.jpg" alt="">
                        </a>
                       
                    </div>
                    <div class="inf">
                        <p class="name">
                            ZTE 中兴 Axon 40 Ultra 手机保护壳
                        </p>
                        <p class="price">￥ 99.99</p>
                        <p class="cart">加入购物车</p>
                    </div>
                </li>
                <li>
                    <div class="pic">
                        <a href="../html/details.html">
                            <img src="../img/15.jpg" alt="">
                        </a>
                       
                    </div>
                    <div class="inf">
                        <p class="name">
                            ZTE 中兴 Axon 40 Ultra 手机保护壳
                        </p>
                        <p class="price">￥ 99.99</p>
                        <p class="cart">加入购物车</p>
                    </div>
                </li>
                <li>
                    <div class="pic">
                        <a href="../html/details.html">
                            <img src="../img/16.jpg" alt="">
                        </a>
                       
                    </div>
                    <div class="inf">
                        <p class="name">
                            ZTE 中兴 Axon 40 Ultra 手机保护壳
                        </p>
                        <p class="price">￥ 99.99</p>
                        <p class="cart">加入购物车</p>
                    </div>
                </li>
                <li>
                    <div class="pic">
                        <a href="../html/details.html">
                            <img src="../img/17.jpg" alt="">
                        </a>
                       
                    </div>
                    <div class="inf">
                        <p class="name">
                            ZTE 中兴 Axon 40 Ultra 手机保护壳
                        </p>
                        <p class="price">￥ 99.99</p>
                        <p class="cart">加入购物车</p>
                    </div>
                </li>
                <li>
                    <div class="pic">
                        <a href="../html/details.html">
                            <img src="../img/18.jpg" alt="">
                        </a>
                       
                    </div>
                    <div class="inf">
                        <p class="name">
                            ZTE 中兴 Axon 40 Ultra 手机保护壳
                        </p>
                        <p class="price">￥ 99.99</p>
                        <p class="cart">加入购物车</p>
                    </div>
                </li>
                <li>
                    <div class="pic">
                        <a href="../html/details.html">
                            <img src="../img/19.png" alt="">
                        </a>
                       
                    </div>
                    <div class="inf">
                        <p class="name">
                            ZTE 中兴 Axon 40 Ultra 手机保护壳
                        </p>
                        <p class="price">￥ 99.99</p>
                        <p class="cart">加入购物车</p>
                    </div>
                </li>
                <li>
                    <div class="pic">
                        <a href="../html/details.html">
                            <img src="../img/20.jpg" alt="">
                        </a>
                       
                    </div>
                    <div class="inf">
                        <p class="name">
                            ZTE 中兴 Axon 40 Ultra 手机保护壳
                        </p>
                        <p class="price">￥ 99.99</p>
                        <p class="cart">加入购物车</p>
                    </div>
                </li>
                
               </ul>

                <script>
                    // $('.item-list .pic').each(function(v){
                         
                    // })     
                        let $pic = $('.item-list .pic');
                        let $cart = $('.cart');
                        $pic.mouseenter(function(){
                            $cart.animate({top : 190},500)
                        })
                    // let pic = document.querySelectorAll('.item-list .pic');
                    // console.log(pic)  
                    // let cart = document.querySelectorAll('.cart');
                    // console.log(cart)
                    // for(let i =  0, len = pic.length; i < len; i ++){
                    //     pic[i].onmouseenter = function(){
                    //         console.log(i)
                    //     }
                        
                    // }
                </script>
 
            </div>
            <!-- 分页 -->
            <nav style="margin-top: 30px; float: right; margin-right: 200px;" class="pagination-outer" aria-label="Page navigation">
                <ul class="pagination">
                    <li class="page-item">
                        <a href="#" class="page-link" aria-label="Previous">
                            <span aria-hidden="true">«</span>
                        </a>
                    </li>
                    <li class="page-item"><a class="page-link" href="#">1</a></li>
                    <li class="page-item active"><a class="page-link" href="#">2</a></li>
                    <li class="page-item"><a class="page-link" href="#">3</a></li>
                    <li class="page-item"><a class="page-link" href="#">4</a></li>
                    <li class="page-item"><a class="page-link" href="#">5</a></li>
                    <li class="page-item">
                        <a href="#" class="page-link" aria-label="Next">
                            <span aria-hidden="true">»</span>
                        </a>
                    </li>
                </ul>
            </nav>
              
        </div>
    </main>
    <!-- 模态框 -->
    <div id="mark">
         <div class="div">
        <div class="float">
            <!-- 加入购物车 -->
            <div class="header-cart">
                <h2 style="float: left; margin-left:310px ;">加入购物车</h2>
                <span class="cuo" style="float: right;">×</span>
            </div>
            <div class="dialog-content" data-good-id="sj1" >
                <form action="" method="post" id="item_form">
                    <div class="shoose">
                        <div class="price">
                            <div> 价格：</div>
                            <div>￥ 99.00</div>
                        </div>
                        <div class="color">
                            <div>颜色:</div>
                             <div>
                                 <img style="width:43px ;" src="../img/min.jpg" alt="">
                             </div>
                        </div>
                        <div class="num">
                            <div>购买数量：</div>
                            <div>
                                <div class="jian"> - </div>
                                <input type="text" value="1">
                                <div class="jia"> + </div>
                            </div>
                        </div>
                        <div class="Cart">
                            <div><a style="color : #ca151d;" href="../html/details.html">加入购物车</a></div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
  </div>
  <footer >

  </footer>
  <script></script>
  <script src="../lib/cookie.js"></script>
  <!-- <script src="../js/list.js"></script> -->
  <script>
        $('header').load('./public.html header')
        $('footer').load('./public.html footer')
      $('.cart').click(function(){
          $(this).css({
              background : 'red',
              color : 'white'
          })
          $('#mark').css({
              display : 'block'
          })

      })
      $('.cuo').click(function(){
        $('#mark').css({
              display : 'none'
          })
          $('.cart').css({
              background : 'white',
              color : 'red',
              border : '1px solid red'
          })
      })
      
  </script>
  
</body>

</html>